<template>
  <view>
    <view style="background-color: #f4f4f4 !important;"
          id="page" class="font-normal" :class="[showMask ? 'blur' : '']">

      <!-- 头部信息区域 -->
      <view class="user-main bg-white">
        <view class="user-info flex-row">
          <!-- 用户头部信息 -->
          <view class="left">
            <view class="user-avatar">
                <avatar
                  :hoverClass="'none'"
                  :avatar="avatar"
                  avatarWidth="140"
                ></avatar>
<!--              <van-image lazy-load round width="77px" height="77px" :src="userInfo.avatar"/>-->
            </view>
          </view>
          <view class="middle">
            <view class="user-content">
              <view class="user-name">{{userInfo.nickName || '----'}}</view>
              <view class="user-id">手机号：{{userInfo.phonenumber || '----'}}</view>
              <view class="user-id">邮箱：{{userInfo.email || '----'}}</view>
              <!--            <view class="user-position" v-if="userInfo.dept" v-for="(item,index) in userInfo.dept" :key="index">
                            <text>{{item.deptName}}</text>
                          </view>-->
            </view>
          </view>
          <view class="right">
            <view class="btn-wrap" >
              <view class="btn bg-primary" @click="clickUser">
                <text>个人信息</text>
              </view>
            </view>
          </view>
        </view>
        

      <view class="deptshow">
 
        <p>我加入的社团：</p>
       <a  class="pull-right"
                       style="color:#53B060;"
                   v-if="user.dept && user.deptId && user.deptStatus=='0'"
                  >{{ user.dept.deptName }}</a>
                                  <a class="pull-right"
                                  style="color:#afafaf"
                   v-if="user.dept && user.deptId && user.deptStatus=='1'"
                  >{{ user.dept.deptName }}（待审核）</a>
                <div class="pull-right" v-if="!user.deptId">
                  <span style="padding-right: 10px">还没有加入社团</span>
                  <van-button style="padding: 5px 8px; color: rgb(235, 224, 125);"  plain size="small" round @click="sqClick">快去申请吧！</van-button>
                </div>


      </view>

        <!-- 我的社团、我的关注、我的活动 -->
        <!-- <view class="user-items flex-row">
          <navigator class="user-item" :url="item.nav" v-for="(item,index) in userItem" :key="index">
            <view class="user-item__num">{{item.num || 0}}</view>
            <view class="user-item__label">{{item.label}}</view>
          </navigator>
        </view> -->
      </view>

      <!-- 社团管理、我的任务、社团消息、发起活动 -->
      <!-- <view class="service flex-row bg-white">
        <view class="service-item">
          <view class="service-item-nav">
            <view @click="admin ? accessClick() : showRejectionModal()">
              <view class="service-item__icon">
                <img src="/static/images/icon/mine/icon-light.png" />
              </view>
              <view class="service-item__label">社团管理</view>
            </view>
          </view>
        </view>
        <view class="service-item" v-for="(item,index) in service" :key="index">
          <navigator :url="item.nav" class="service-item-nav">
            <view>
              <view class="service-item__icon">
                <img :src="item.src" />
              </view>
              <view class="service-item__label">{{item.label}}</view>
            </view>
          </navigator>
        </view>
      </view> -->

      <!-- 单元格 -->
      <view class="cell-group">
        <navigator v-for="(item,index) in cells" :key="index" class="cell" :url="item.nav">
          <view class="cell-left">
            <view class="cell__icon-wrap">
              <img  class="cell-left__icon" :src="item.src"  mode="widthFix"/>
            </view>
          </view>
          <view class="cell-right">
            <text class="cell-right__label">{{item.label}}</text>
            <text class="iconfont icon-lr"></text>
          </view>
        </navigator>
      </view>
      <view class="cell-group">
        <navigator url="/pages/subpage/login/main">
          <view class="cell" @click.stop="logged ? showLogoutModal() : ''">
            <view class="cell-left">
              <view class="cell__icon-wrap">
                <img class="cell-left__icon"
                     src="/static/images/icon/mine/cell/icon-login.png"
                     mode="widthFix"
                />
              </view>
            </view>
            <view class="cell-right">
              <text class="cell-right__label">{{logged ? '退出登录' : '登录'}}</text>
              <text class="iconfont icon-lr"></text>
            </view>
          </view>
        </navigator>
      </view>

    </view>
    <!-- 遮罩层 -->

    <mask-layer v-if="showMask" :color="maskColor">
      <view slot="cover" class="cover animated zoomIn faster">
        <modal-cover v-if="logged" style="width:100%;">
          <view slot="modal-header">
            <view class="modal-header">
              <view class="modal-header__cover">
                <img :src="modalImage" mode="widthFix" />
              </view>
            </view>
          </view>
          <view slot="modal-body">
            <view class="modal-body__content">{{modalText}}</view>
          </view>
          <view slot="modal-footer">
            <view v-if="access" class="modal-footer">
              <view class="modal-footer__confirm" @click="closeModal"
                    style="background-color:#ececec;color:#363636;"
              >
                关闭
              </view>
            </view>
            <view v-if="logout" class="modal-footer">
              <view class="modal-footer__confirm" style="background-color:#ff7474;color:#ffffff;"
                @click="onLogout"
              >
                退出登录
              </view>
              <view class="modal-footer__cancel" @click="closeModal">点错了</view>
            </view>
          </view>
        </modal-cover>
        <button
          v-if="!logged"
          @click="canClick ? onLogin() : ''"
          class="login-btn bg-primary"
        >
          去登录
        </button>
      </view>
    </mask-layer>
  </view>
</template>

<script>
import {getToken,setToken,removeToken,clearToken} from "../../utils/auth";
import {listDept} from '@/api/dept'
import {getUserProfile} from "../../api/user";
import Bus from "../../utils/bus";
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      logged: true,
      showMask: false,
      maskColor: null,
      modalImage: "",
      modalText: "",
       roleGroup: {},
      postGroup: {},
      // 用户信息
      userInfo: {},
      roleGroup: {},
      postGroup: {},
      // 功能模块
      userItem: [
        {
          
          label: "我的社团",
          nav: "/pages/subpage/@mine/primary/myClub/myClub"
        },
        {
          label: "我的关注",
          nav: "/pages/subpage/@mine/primary/myFollow/myFollow"
        },
        // {
        //   num: 0,
        //   label: "我的活动",
        //   nav: "/pages/subpage/@mine/primary/myActivity/myActivity"
        // }
      ],
      // 功能模块
      // service: [
      //   {
      //     src: "/static/images/icon/mine/icon-tab.png",
      //     label: "评论通知",
      //     nav: "/pages/message/comment/main"
      //   },
      //   { src: "/static/images/icon/mine/icon-msg.png", label: "消息通知" ,nav: "/pages/message/notify/main"},
      //   {
      //     src: "/static/images/icon/mine/icon-show.png",
      //     label: "发送动态",
      //     nav: ""
      //   }
      // ],
      // 单元格
      cells: [
        {
           nav: "/pages/circle/dynamic/main",
          src: "/static/images/icon/mine/cell/icon-star.png",
          label: "我的动态"
        },
        {  nav: "/pages/circle/trends/main",
          src: "/static/images/icon/mine/cell/icon-add.png",
          label: "发布动态" 
          },
        {
          nav: "/pages/resetpwd/main",
          src: "/static/images/icon/mine/cell/icon-more.png",
          label: "修改密码"
        }
      ],
      admin: false,
      access: false,
      logout: false,
      clubAdmin: [],
      canClick: true,
      avatar:''
    }
  },
  watch:{
    token(e){
      this.identityCheck()
    }
  },
    created() {
    this.getUser();
    this.identityCheck();
  },

  computed:{
    token(){
      return getToken();
    },
    ...mapGetters(['avatar', 'name', 'user'])
  },
  mounted(){
    this.getDeptList();
    Bus.$on('跳转刷新',(res=>{
      if (res=='onSave'){
        this.identityCheck(getToken());
      }else if(res=='register'){
        this.identityCheck(getToken());
      }else {
        this.identityCheck(res);
      }
    }))
  },
  methods: {
    // 用户的身份校验
    identityCheck(val) {
      let tokenValue= this.token || val
      if (tokenValue){
        this.logged=true
        this.showMask=false
        this.$store.dispatch('GetInfo').then(res => {
          getUserProfile().then(response => {
            this.userInfo = response.data;
            if (this.userInfo.avatar){
              this.avatar='http://42.192.211.158:8888/zutassociation' + this.userInfo.avatar
            }else {
              this.avatar='/static/images/icon-unlogin.png'
            }
            this.roleGroup = response.roleGroup;
            this.postGroup = response.postGroup;
          });
        }).catch(err => {
          console.log(err)
          this.$store.dispatch('LogOut').then(() => {
            this.setToast({ title: err })
            wx.navigateTo({
              url: '/pages/subpage/login/main'
            })
          })
        })
     
      }else {
        this.logged=false
        this.showMask=true
        this.userInfo={}
        this.avatar='/static/images/icon-unlogin.png'
        this.roleGroup={}
        this.postGroup={}
      }
    },


 getDeptList() {
      listDept(this.queryParams).then(response => {
        this.deptList = response.data
        this.deptList.map(item => {
          //   // item.img = this.change(item.img)
          //   item.url=this.getObjectKeys(item.deptContent)
        })
      })
    },
        getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },

     //组织申请按钮
        sqClick(){
    //  sessionStorage.removeItem('deptListName')
      this.$router.push('../recruitnew/main')
    },


    //个人信息按钮
    clickUser(){
      console.log(this.userInfo)
      let fileList=[{
        url:this.avatar,
        name:'头像',
        deletable: true
      }]
      mpvue.navigateTo({
        url: '/pages/subpage/@mine/userInfo/main?userInfo='+JSON.stringify(this.userInfo)+ '&postGroup=' +JSON.stringify(this.postGroup)
          + '&fileList=' +JSON.stringify(fileList)
      });
    },

    //登录
    onLogin() {
      this.canClick=false;
      wx.navigateTo({
        url: '/pages/subpage/login/main'
      });
      setTimeout(() => {
        this.canClick=true
      }, 800);
    },

    // 退出登录
    async onLogout() {
      this.$store.dispatch('LogOut').then(() => {
        /*wx.redirectTo({
          url: '/pages/subpage/login/main'
        })*/
        wx.clearStorageSync();
        wx.navigateTo({ url: "/pages/subpage/login/main" });
        this.logged=false
        this.showMask= true
        this.maskColor="rgba(255, 255, 255, .2)"
        this.access= false
        this.userInfo={}
        this.avatar=""
      })
      /*app.globalData.clubNum = 0;
      app.globalData.followNum = 0;
      app.globalData.activityNum = 0;*/
    },

    showLogoutModal() {
      this.showMask=true
      this.logout=true
      this.maskColor= "rgba(0, 0, 0, .2)"
      this.modalImage="/static/images/img/img_logout_cover.svg"
      this.modalText= "退出登录后，将清除本地的缓存数据，如账号信息和个人设置等，再次登录后将重新获取"
    },
    accessClick() {
      /*if (this.data.clubAdmin.length === 1) {
        app.globalData.clubID = this.data.clubAdmin[0].id;
        wx.navigateTo({
          url: "/pages/subpage/@mine/primary/management/management"
        });
      }*/
    },
    showRejectionModal() {
      wx.navigateTo({
        url: "/pages/subpage/@mine/primary/management/management"
      });
      // this.setData({
      //   showMask: true,
      //   access: true,
      //   maskColor: "rgba(0, 0, 0, .2)",
      //   modalImage: "/assets/images/img/img_login_cover.svg",
      //   modalText: "该功能只有社团的管理者才能使用哦！"
      // });
    },

    //关闭
    closeModal() {
      this.showMask=false
      this.access=false
      this.logout=false
    }
  }
}
</script>

<style scoped>
page {
  background-color: #f4f4f4 !important;
}

.user-main {
  padding: 100rpx 0 20rpx 30rpx;
  margin-bottom: 20rpx;
}

.left {
  width: 20%;
}

.middle {
  width: 60%;
  padding-left: 40rpx;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 22%;
}

.user-info {
  margin-bottom: 40rpx;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
}

.user-id {
  margin: 10rpx 0;
  font-size: 25rpx;
  color: #afafaf;
}

.user-position {
  margin: 20rpx 0;
}

.user-position text {
  padding: 5rpx 20rpx;
  border-radius: 30rpx;
  color: #afafaf;
  background-color: #f0f0f0;
}

.unlogin-wrap {
  width: 80%;
  display: flex;
  justify-content: center;
}

.unlogin {
  width: 30%;
  text-align: center;
  padding: 12rpx;
  color: #ffbd4a;
  border: 4rpx solid #ffbd4a;
  border-radius: 10rpx;
}

.btn-wrap {
  width: 100%;
  margin-bottom: 20rpx;
  border: 4rpx solid #363636;
  border-right: none;
  border-top-left-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  padding: 5rpx 0 0 5rpx;
  height: 60rpx;
}

.btn {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  border-top-left-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  justify-content: center;
}

.user-items {
  justify-content: space-around;
}

.user-item {
  width: 30%;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 15rpx;
}

.user-item__num {
  font-size: 40rpx;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.user-item__label {
  color: #afafaf;
}

.service {
  margin-bottom: 20rpx;
}

.service-item {
  width: 25%;
  text-align: center;
  padding: 20rpx 10rpx;
}

.service-item-nav {
  padding: 20rpx 10rpx;
  border-radius: 15rpx;
}

.service-item__icon image {
  width: 50rpx;
  height: 50rpx;
}

.service-item__label {
  margin-top: 10rpx;
  font-size: 26rpx;
}

.cell-group {
  width: 100%;
  margin-bottom: 20rpx;
  background-color: #ffffff;
}

.cell {
  display: flex;
  justify-content: space-between;
}

.cell-left {
  width: 5%;
  padding: 35rpx 50rpx;
}

.cell-right {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 25rpx;
  border-bottom: 1rpx solid #ececec;
}

.cell__icon {
  font-size: 40rpx;
}

.icon-lr {
  color: #afafaf;
}

.cell-left__icon {
  width: 40rpx;
}

.cover {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal {
  width: 80%;
  border-radius: 15rpx;
  overflow: hidden;
  background-color: #ffffff;
}

.modal-header {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #f1f1f1;
}

.modal-header__cover {
  width: 60%;
}

.modal-header__cover image {
  width: 100%;
}

.modal-body__content {
  padding: 30rpx;
  color: #504f60;
}

.modal-footer {
  padding: 30rpx;
}

.modal-footer__confirm {
  padding: 20rpx;
  text-align: center;
  border-radius: 15rpx;
}

.modal-footer__cancel {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
  color: #afafaf;
}

.login-btn {
  width: 50%;
  text-align: center;
  font-size: 32rpx;
  border-radius: 15rpx;
}

.deptshow{
  /* height: 30px; */
  width: 90%;
  border-radius: 5px;
}
.pull-right{
  font-size: 15px;
  text-align: center;
}
</style>
